/* eslint-disable react/prop-types */
import { CopyOutlined } from "@ant-design/icons"
import { Button, Flex, Form, Typography } from "antd"
import { useCallback } from "react"

import { queryMemberInfoEdit } from "@/api/member"
import { IMemberParams } from "@/api/risk/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

interface ILoginPasswordResetModal {
	handleCancel: () => void
	data: IMemberParams
}
export interface IResetPwdAfter {
	newPassword: string
	resetPwdRemark: string
}
export const generateRandomPassword = (len: number) => {
	const regNumber = /\d+/
	const regLetter = /[a-zA-Z]+/
	const letterStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
	const letterNumStr = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"

	const getRandomLetter = () => letterStr[Math.floor(Math.random() * letterStr.length)]

	const getRandomPassword = () => {
		let value = getRandomLetter()
		for (let i = 1; i < len; i++) {
			value += letterNumStr[Math.floor(Math.random() * letterNumStr.length)]
		}
		return value
	}

	let password = getRandomPassword()

	while (!(regNumber.test(password) && regLetter.test(password))) {
		password = getRandomPassword()
	}

	return password
}

export const LoginPasswordResetModal: React.FC<ILoginPasswordResetModal> = ({ handleCancel, data }) => {
	const { formatMessage } = useLocale()
	const resetPassword = generateRandomPassword(8)
	const submit = useCallback(
		async (value: IResetPwdAfter) => {
			const body = {
				resetPwdAfterRes: {
					newPassword: resetPassword,
					resetPwdRemark: value.resetPwdRemark
				},
				merchantId: data.merchantId,
				userId: data.userId,
				userName: data.username
			}
			const [err] = await queryMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[data, resetPassword]
	)
	const [form] = Form.useForm()

	const { loading } = useApi()
	const handleCopy = () => {
		navigator.clipboard
			.writeText(resetPassword)
			.then(() => {
				Toast.success(formatMessage({ id: "member.modal.success" }))
			})
			.catch(() => {
				Toast.error(formatMessage({ id: "member.modal.fail" }))
			})
	}
	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form
					style={{ width: "100%" }}
					form={form}
					onFinish={submit}
					initialValues={{
						resetPwdRemark: ""
					}}
				>
					<Flex vertical gap={10}>
						<Flex justify="center" vertical align="center">
							<Flex>
								<Typography.Text>
									重置成功后，登录密码为： <Typography.Text type="success">{resetPassword} </Typography.Text>
								</Typography.Text>
								<Button className="title-first" onClick={handleCopy} icon={<CopyOutlined />}></Button>
							</Flex>
							<Typography.Text>请提醒用户使用此密码登录后，设置新密码</Typography.Text>
						</Flex>

						<CustomTextArea
							normalize={(value: string) => {
								return value.replace(" ", "")
							}}
							width="100%"
							placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
							name="resetPwdRemark"
							label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
						/>

						<Flex justify="center" wrap="wrap" gap={10}>
							<Button
								key="back"
								onClick={() => {
									handleCancel()
									form.resetFields()
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button htmlType="submit" type="primary" loading={loading}>
								{formatMessage({ id: "common.sure" })}
							</Button>
						</Flex>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
